<template>
  <f7-page>
    <f7-navbar :title="`修改${getTitle}`" back-link="返回"></f7-navbar>

    <div class="container-box">
      <custom-input type="password" :label="`原${getTitle}`" :placeholder="`请输入原${getTitle}`" v-model="formItems.old_pwd"></custom-input>
      <custom-input type="password" :label="`新${getTitle}`" :placeholder="`请输入新${getTitle}`" v-model="formItems.pwd1"></custom-input>
      <custom-input type="password" :label="`确认新${getTitle}`" :placeholder="`请在此输入新${getTitle}`" v-model="formItems.pwd2"></custom-input>

      <f7-button fill @click="handleUpdatePwd">确定</f7-button>
    </div>

  </f7-page>
</template>

<script>
  import { updatePwd } from "../api/my";

  export default {
    name: "update-password",
    data() {
      return {
        formItems: {
          pwd1: '',
          pwd2: '',
          old_pwd: ''
        }
      }
    },
    computed: {
      getTitle() {
        return this.$f7route.query.type === '1'?'登录密码':'交易密码'
      }
    },
    methods: {
      handleUpdatePwd() {
        updatePwd(this.formItems, this.$f7route.query.type).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .container-box {
    padding: 30px;
    .button {
      margin-top: 100px;
    }
  }
</style>